<template>
     <div class="stats-box">
        <CardBox title="数据指标"></CardBox>
        <div class="content-container stats-container">
          <div class="status-row">
            <div class="status-item">
              <div class="status-item-title"></div>
              <div class="status-item-value">
                <div class="status-item-dot">今日统计</div>
                <div class="status-item-value-num fonts-DIN">{{todayResults.classify}}<span>种</span></div>
                <div class="status-item-value-unit fonts-DIN">{{todayResults.value}}<span>条</span></div>
              </div>
            </div>
            <div class="status-item">
              <div class="status-item-type" v-for="item in todayResults.list" :key="item.id">
                <div class="status-item-type-title">{{ item.name }}</div>
                <div class="status-item-type-value fonts-DIN">{{ item.classify }}<span>种</span></div>
                <div class="status-item-type-unit fonts-DIN">{{ item.value }}<span>条</span></div>
              </div>
            </div>
          </div>
          <div class="status-row">
            <div class="status-item">
              <div class="status-item-title"></div>
              <div class="status-item-value">
                <div class="status-item-dot">历史统计</div>
                <div class="status-item-value-num fonts-DIN">{{totalResults.classify}}<span>种</span></div>
                <div class="status-item-value-unit fonts-DIN">{{totalResults.value}}<span>条</span></div>
              </div>
            </div>
            <div class="status-item">
              <div class="status-item-type" v-for="item in totalResults.list" :key="item.id">
                <div class="status-item-type-title">{{ item.name }}</div>
                <div class="status-item-type-value fonts-DIN">{{ item.classify }}<span>种</span></div>
                <div class="status-item-type-unit fonts-DIN">{{ item.value }}<span>条</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
</template>
<script>
import CardBox from "@/components/Global/CardBox.vue";
export default {
    name: 'StatsBox',
    components:{
      CardBox
    },
    data(){
        return{
            devicesTotal:[
                {
                name: '红外',
                status: {
                    normal: 123,
                    offline: 4,
                    error: 0
                }
                },
                {
                name: '视频',
                status: {
                    normal: 1322,
                    offline: 3,
                    error: 0
                }
                },
                {
                name: '声纹',
                status: {
                    normal: 112,
                    offline: 2,
                    error: 0
                }
                },
                {
                name: '虫情',
                status: {
                    normal: 412,
                    offline:1,
                    error: 0
                }
            }
            ],
          todayResults: {
            classify: 0,
            value: 0,
            list: []
          },
          totalResults: {
            classify: 0,
            value: 0,
            list: []
          }
        }
    },
  mounted() {
    this.$api.device.getIdentificationStatistics().then(res => {
      this.todayResults=res.today;
      this.totalResults=res.total;
    });
  }
}
</script>
<style lang="scss" scoped>
.stats-container {
  height: 172px;
  overflow: hidden;
}
.status-row {
  display: flex;
  padding: 8px;
  height: 70px;

  .status-item:nth-child(2) {
    flex: 1;
  }

  .status-item:nth-child(1) {
    display: flex;
    width: 160px;

    .status-item-title {
      font-size: 14px;
      color: rgba(255, 255, 255);
      text-align: center;
      width: 70px;
      height: 60px;
      background: url('@/assets/img/status-label.png');
      position: relative;
      top: 5px;
    }

    .status-item-value {
      width: 70px;
      margin-left: 10px;

      .status-item-dot {
        margin-bottom: 10px;
        font-size: 14px;
        color: #CCCCCC;
      }

      .status-item-value-num,
      .status-item-value-unit {
        font-size: 16px;
        color: #fff;
        span{
          font-size: 12px;
        }
      }
    }
  }

  .status-item:nth-child(2) {
    display: flex;

    .status-item-type {
      text-align: center;
      flex: 1;
      gap: 27px;

      .status-item-type-title {
        margin-bottom: 10px;
        font-size: 14px;
        color: #CCCCCC;
      }

      .status-item-type-value,
      .status-item-type-unit {
        font-size: 16px;
        color: #fff;
        span{
          font-size: 12px;
        }
      }
    }
  }
}

.status-row:nth-child(1) {
  border-bottom: 1px dashed #146095;
}
.status-row:nth-child(2) {
  .status-item-title {
    background: url('@/assets/img/status-label1.png')!important;
  }
}
.stats-title {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 5px;
}

.stats-value {
  font-size: 24px;
  color: #00FFFF;
  font-weight: bold;
  margin-bottom: 5px;
}

.stats-value span {
  font-size: 14px;
  margin-left: 4px;
}

.stats-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.stats-item {
  background: rgba(0, 24, 106, 0.8);
  border-radius: 4px;
  padding: 10px;
}
</style>
